.container {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
   z-index: 1001;

   &.hidden {
      display: none;
   }
}

.modal {
   position: relative;
   padding-bottom: 5rem;
   border-radius: 1.5rem;
   background-color: var(--bg-modal);
   z-index: 1000;
   box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 20px -10px;
   border: none;

   @media (max-width: 850px) {
      padding-bottom: 3rem;
   }

   @media (max-height: 528px) {
      padding-bottom: 2.5rem;
   }
}

.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.2);
   z-index: 100;
}

.close__btn {
   position: absolute;
   top: 2rem;
   right: 2rem;
   line-height: 1;
   font-size: 2.5rem;
   color: var(--text-secondary);
   background-color: var(--bg-container);
   cursor: pointer;
   padding: 1rem;
   display: flex;
   align-items: center;
   border-radius: 1rem;
   border: none;
   transition: all 0.3s;

   @media (max-width: 450px) {
      font-size: 2rem;
      top: 1.5rem;
      right: 1.5rem;
   }
}
